<template>
    <div class="favorites-page">
        <div class="media-list list-block page-header">
            <div class="item-content">
                <!--<div class="item-media">
                    <img class="header-img"
                         :src="item.icon" />
                </div>-->
                <div class="item-inner">
                    <div class="item-title">{{item.name}}</div>
                    <div class="item-text"
                         v-if="item.concerned">{{item.concerned}}人关注</div>
                    <div class="item-text"
                         v-else>暂时无人关注</div>
                </div>
            </div>
            <div class="button-block">
                <a href="#"
                   class="button button-small"
                   @click="onNavto">编辑</a>
            </div>
            <div class="item-text">{{item.intro}}</div>
        </div>
        <div class="list-block top-bottom">
            <div class="item-content">
                <div class="item-media"><i class="icon icon-folder-fill"></i></div>
                <div class="item-inner">
                    <div class="item-title good-style">获得100赞</div>
                </div>
                <div class="item-title focused">1.5万人已关注</div>
            </div>
        </div>
    </div>
</template>


<script type="text/javascript">
import store from '../store/index'
export default {
    name: "favorites-header",
    props: {
        item: {
            // type:Object,
            default: function () {
                return {
                    name: 'Outlook使用技巧汇总', //概念
                    intro: 'Outlook.com 是 Microsoft 提供的免费个人电子邮件服务。 其附带的强大组织工具可以帮助您的收件箱保持整洁',//简绍
                }
            }
        },
        nextState: {
            type: Object,
            default: function () {
                return {
                    pageName: 'edit-favorites-page',
                    key: 'forumId',
                    val: ''
                }
            }
        }
    },
    methods: {
        onNavto() {
            const vm = this
            const pageName = vm.nextState.pageName
            if (vm.nextState.key) store.dispatch(vm.nextState.dispatch, {
                [vm.nextState.key]: vm.nextState.val
            })
            if (pageName) myApp.redictNewPage(pageName, true, false)
        }
    }
}
</script>
